import React, { memo,useState } from 'react'
import {  Link, NavLink} from 'react-router-dom';
import { connect } from 'react-redux';

import './index.css';
import { getDanquSearchResAction,getGedanSearchResAction,getGeshouSearchResAction,getZhuanjiSearchResAction } from '../../redux/actions/header';

const Header = memo((props) => {

  let timer = null;
  let [searchkey,setSearkey] = useState("");
  async function searchRes(e) {
    const value = e.target.value;
    clearTimeout(timer);//防抖设置
    let p1, p2, p3, p4,res;
    timer = setTimeout(async() => {
      setSearkey(() => (value))
      p1=props.getDanquSearchRes(value);// 单曲
      p2 = props.getGeshouSearchRes(value);// 歌手
      p3=props.getZhuanjiSearchRes(value);// 专辑
      p4 = props.getGedanSearchRes(value)// 歌单
    }, 300);
  }

  function goDanqu(e) {
    console.log(e);
  }
  function goGeshou(e) {
    console.log(e);
  }
  function goZhuanji(e) {
    console.log(e);
  }
  function goGedan(e) {
    console.log(e);
  }

  return (
    <div className='header'>
      {props.danquRes.map(el => {
        <button key={el.id}>12</button>
      })}
      <div className="header_main">
        <div className="logo"></div>
        <ul>
          <li>
            <NavLink to='/home' activeClassName='header_choose'>发现音乐</NavLink>
          </li>
          <li>
            <NavLink to='/mymusic' activeClassName='header_choose'>我的音乐</NavLink>
          </li>
          <li>
            <NavLink to='/concern' activeClassName='header_choose'>关注</NavLink>
          </li>
          <li>
            <a href="#" target="_blank" >商城</a>
          </li>
          <li>
            <a href="#" target="_blank">商城</a>
          </li>
          <li>
          <a href="#" target="_blank">下载客户端</a>
          </li>
        </ul>
        <div className="right_header">
          <div className="search">
            <input type="text" placeholder='音乐/搜索' onChange={(e) => { searchRes(e) }} onBlur={() => { setSearkey("") }} onFocus={(e) => {searchRes(e) }} />
            <div className='searchList' style={{display:searchkey?"block":"none"}}>
              <table className="searchuser">
                <thead>
                  <tr>
                    <td colSpan="2" >
                      <Link to={'/home'}>搜{searchkey }用户{ '>'}</Link>
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td valign='top'>单曲</td>
                    <td>
                      {props.danquRes?.slice(0,4).map(el => {
                        return <div onClick={() => { goDanqu(el); }} key={el.id}>{el.name}-{el.artists.map(el => {return el.name}).join()}</div>
                      })}
                    </td>
                  </tr>
                  <tr>
                    <td valign='top'>歌手</td>
                    <td>
                      {props.geshouRes?.slice(0, 1).map(el=>{
                        return <div onClick={() => { goGeshou(el) }} key={el.id}>{ el.name}</div>
                      })}
                    </td>
                  </tr>
                  <tr>
                    <td valign='top'>专辑</td>
                    <td>
                      {props.zhaunjiRes?.slice(0, 2).map(el=>{
                        return <div onClick={() => { goZhuanji(el) }} key={el.id}>{ el.name}-{el.artists.map(el => {return el.name}).join()}</div>
                      })}
                    </td>
                  </tr>
                  <tr>
                    <td valign='top'>歌单</td>
                    <td>
                      {props.gedanRes?.slice(0, 2).map(el=>{
                        return <div onClick={() => { goGedan(el) }} key={el.id}>{ el.name}-{el.creator.nickname}</div>
                      })}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div className='maker_center'>创作者中心</div>
          <div className='login'>登录</div>
        </div>
      </div>
    </div>
  )
})

/* 0---------------------------容器组件 ----------------------------*/
const mapStateToProps = (state) => { 
  return {
    danquRes: state.HeaderReducer.danquRes,
    geshouRes: state.HeaderReducer.geshouRes,
    zhaunjiRes: state.HeaderReducer.zhaunjiRes,
    gedanRes: state.HeaderReducer.gedanRes
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getDanquSearchRes: (key) => dispatch(getDanquSearchResAction(key)),
    getGedanSearchRes: (key) => dispatch(getGedanSearchResAction(key)),
    getGeshouSearchRes: (key) => dispatch(getGeshouSearchResAction(key)),
    getZhuanjiSearchRes: (key) => dispatch(getZhuanjiSearchResAction(key)),
  }
 }

export default connect(mapStateToProps, mapDispatchToProps)(Header)